<template>
  <div class="my-account-page">
    <GetBioJobNavbar />
    
    <div class="account-container">
      <h1 class="page-title">My Account</h1>
      <p class="page-subtitle">Manage your profile, subscription, and saved content</p>

      <!-- Profile Information -->
      <el-card class="account-section">
        <h2 class="section-title">Profile Information</h2>
        <div class="profile-content">
          <el-avatar :size="80" class="profile-avatar">
            <i class="el-icon-user-solid"></i>
          </el-avatar>
          <div class="profile-form">
            <el-form :model="profileForm" label-width="120px">
              <el-form-item label="Full Name">
                <el-input v-model="profileForm.fullName" placeholder="Dr. Sarah Chen"></el-input>
              </el-form-item>
              <el-form-item label="Email Address">
                <el-input v-model="profileForm.email" placeholder="sarah.chen@email.com"></el-input>
              </el-form-item>
              <el-button type="primary" @click="saveProfile">Save Changes</el-button>
            </el-form>
          </div>
        </div>
      </el-card>

      <!-- Subscription Status -->
      <el-card class="account-section">
        <div class="subscription-header">
          <div>
            <h2 class="section-title">Subscription Status</h2>
            <div class="subscription-info">
              <span class="subscription-type">7-Day Trial</span>
              <el-tag type="success" size="small">Active</el-tag>
            </div>
            <p class="subscription-details">Trial expires on January 15, 2025</p>
            <p class="subscription-note">Manage your subscription anytime.</p>
          </div>
          <el-button type="primary" @click="$router.push('/pricing')">Upgrade to Premium</el-button>
        </div>
      </el-card>

      <!-- My Resume -->
      <el-card class="account-section">
        <div class="resume-header">
          <h2 class="section-title">My Resume</h2>
          <el-button type="primary" @click="$router.push('/resume-templates')">Create New Resume</el-button>
        </div>
        <div class="resume-list">
          <div v-for="resume in resumes" :key="resume.id" class="resume-item">
            <div class="resume-info">
              <span class="resume-name">{{ resume.name }}</span>
              <span class="resume-date">Last edited: {{ resume.lastEdited }}</span>
            </div>
            <i class="el-icon-edit edit-icon"></i>
          </div>
        </div>
        <a href="#" class="view-all-link">View All Resumes</a>
      </el-card>

      <!-- My Saved Jobs -->
      <el-card class="account-section">
        <h2 class="section-title">My Saved Jobs</h2>
        <div class="jobs-list">
          <div v-for="job in savedJobs" :key="job.id" class="job-item">
            <div class="job-info">
              <span class="job-title">{{ job.title }}</span>
              <span class="job-company">{{ job.company }} • {{ job.location }}</span>
            </div>
            <i class="el-icon-view view-icon"></i>
          </div>
        </div>
        <a href="#" class="view-all-link">View All Saved Jobs</a>
      </el-card>

      <!-- Account Actions -->
      <el-card class="account-section">
        <h2 class="section-title">Account Actions</h2>
        <div class="account-actions">
          <el-button class="sign-out-button" @click="handleSignOut">
            <i class="el-icon-right"></i>
            Sign Out
          </el-button>
          <a href="#" class="delete-account-link">Delete Account</a>
        </div>
      </el-card>
    </div>

    <GetBioJobFooter />
  </div>
</template>

<script>
export default {
  name: 'MyAccountPage',
  data() {
    return {
      profileForm: {
        fullName: 'Dr. Sarah Chen',
        email: 'sarah.chen@email.com'
      },
      resumes: [
        {
          id: 1,
          name: 'Biotech Research Scientist Resume',
          lastEdited: 'January 8, 2025'
        },
        {
          id: 2,
          name: 'Senior Lab Manager Resume',
          lastEdited: 'January 5, 2025'
        },
        {
          id: 3,
          name: 'Clinical Research Associate Resume',
          lastEdited: 'December 28, 2024'
        }
      ],
      savedJobs: [
        {
          id: 1,
          title: 'Senior Research Scientist',
          company: 'Moderna',
          location: 'Cambridge, MA'
        },
        {
          id: 2,
          title: 'Clinical Development Manager',
          company: 'Pfizer',
          location: 'New York, NY'
        },
        {
          id: 3,
          title: 'Bioinformatics Specialist',
          company: 'Genentech',
          location: 'South San Francisco, CA'
        },
        {
          id: 4,
          title: 'Regulatory Affairs Associate',
          company: 'Johnson & Johnson',
          location: 'New Brunswick, NJ'
        }
      ]
    }
  },
  methods: {
    saveProfile() {
      this.$message.success('Profile updated successfully!')
    },
    handleSignOut() {
      this.$confirm('Are you sure you want to sign out?', 'Sign Out', {
        confirmButtonText: 'Sign Out',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.$message.success('Signed out successfully')
        this.$router.push('/')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.my-account-page {
  min-height: 100vh;
  background-color: #f9f9f9;
}

.account-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.account-section {
  margin-bottom: 24px;
  background-color: #fff;
}

.account-section /deep/ .el-card__body {
  padding: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

.profile-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.profile-avatar {
  background-color: #f5f5f5;
  color: #999;
  font-size: 40px;
}

.profile-form {
  flex: 1;
}

.subscription-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.subscription-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.subscription-type {
  font-size: 18px;
  color: #666;
}

.subscription-details {
  font-size: 14px;
  color: #999;
  margin: 4px 0;
}

.subscription-note {
  font-size: 14px;
  color: #999;
  margin: 4px 0 0 0;
}

.resume-header,
.account-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.resume-list,
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.resume-item,
.job-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.resume-info,
.job-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resume-name,
.job-title {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

.resume-date,
.job-company {
  font-size: 14px;
  color: #999;
}

.edit-icon,
.view-icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.view-all-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.view-all-link:hover {
  color: #409eff;
}

.sign-out-button {
  border: 1px solid #000;
  color: #000;
  background-color: #fff;
  padding: 10px 20px;
}

.delete-account-link {
  color: #f56c6c;
  text-decoration: none;
  font-size: 14px;
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }
  
  .subscription-header,
  .resume-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .account-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
</style>

